• 第六天囉，準備好愉悅的心情，開始今天的學習!
• 今天我們要介紹的是of及range，這兩個在RxJS中，屬於負責創建資料來源。
• 依照LearnRxJS網站的分類，屬於creation。喔對了，fromEvent也是其中之一喔!✍

of

• 定義: of(data1, data2...dataN)，就是依序將你的資料，用next()輸出，直到資料尾聲dataN，再呼叫complete()

• 底下這張圖稱之為彈珠圖(marble diagram)，水平是一個時間軸線，幫助我們了解RxJS運作的過程喔。補充資訊-Mike Huang認識彈珠圖 Marble Diagram

• 從這張圖來看，of依序地將資料，循序的輸出。咱們趕緊來實作一下。
  

圖片來源 RxJS官網 - of介紹

case1: 給序列的數字，來看看印出什麼

stackblitz

import { of } from 'rxjs';

// observer
const observer = {
  next: (value) => console.log('next', value),
  error: (err) => console.log('error', err),
  complete: () => console.log('complete'),
};

console.log("=== of : case1 ===")
of(1, 2, 3, 4, 5).subscribe(observer);

//=== of : case1 ===
//next 1
//next 2
//next 3
//next 4
//next 5
//complete

• 這例子非常簡單易懂，我們來點不一樣的變化，看看有什麼改變!

case2: 給個不同型態的資料，看他能不能照單全收

stackblitz

...
console.log('=== of : case2 放入不同的值 ===');
of('one', 2, { three: 333 }, 'Four', [5,5,5]).subscribe(observer);

// === of : case2 放入不同的值 ===
// next one
// next 2
// next {three: 333}
// next Four
// next [5,5,5]
// complete

• 沒錯，你給他什麼他就印出什麼，型態不變，照單全收

range:

圖片來源 RxJS官網 - range介紹

• 定義: range(start, N): 給定**起始值(start)**及**長度N**，他就能自動地幫你累加數值，並依序地傳遞給你。
• 這確實也幫我們省了不少事，更可以讓我們做些不同的變化，來看看範例。

stackblitz

import { range } from 'rxjs';

// observer
const observer = {
  next: (value) => console.log('next', value),
  error: (err) => console.log('error', err),
  complete: () => console.log('complete'),
};

console.log('=== range : case1 ===');
range(0,5).subscribe(observer)  // 0,1,2,3,4

console.log('=== range : case2 不同的起始值 ===');
range(-4,5).subscribe(observer) // -4,-3,-2,-1,0

• range就是這麼的單純，直覺，說穿了就是像一個迴圈依樣，將你的初始值累加到你設定的條件式，結束。
• 有寫過python的range應該也不陌生

# I'm Python case
for i in range(0,10):
  print(i)

✍Recap

• 今天介紹了兩個屬於創建類(creation)的RxJS Operator

1. of(data1, data2...dataN): 依序吐出 data1, data2...dataN
2. range(start, N): 依序給予start, start+1, start+2...start+N

• 今天的內容相當簡單，但也建議大家不妨動手練習看看，加深印象，讓RxJS成為你順手的工具!!
• Day6完成啦!早上寫文章成了一種習慣，喜歡這樣的節奏，開勳~灑花!!
  

Resource

1. Mike大的-認識彈珠圖 Marble Diagram
2. RxJS官網 - of介紹
3. RxJS官網 - range介紹